<!DOCTYPE html>
<html lang="en">
<head>
<title>Matrix Admin</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../js/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="../js/handsontable/handsontable.full.min.css">
    <link rel="stylesheet" type="text/css" href="../js/handsontable/main.css">
    <script src="../js/handsontable/handsontable.full.min.js"></script>
    <script src="../js/handsontable/jquery.min.js"></script>
    <script src="../js/handsontable/xlsx.full.min.js"></script>
    <script src="../js/layui/layui.js" charset="utf-8"></script>
   <!-- <script src="../js/resultsDisplay.js" ></script>-->
    <style type="text/css">
        .layui-badge-dot {
            width: 18px;
            height: 18px;

        }
        .layui-form-label {
            line-height: 30px;
            padding:0px;
        }
        .layui-form-select .layui-input {
            height: 30px;
        }
        .layui-inline {
            height: 30px;
            line-height: 30px;
        }
    </style>
</head>
<body>

<div id="content">
    <div style="padding: 20px; background-color: #F2F2F2;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">正则列表</div>
                    <div class="layui-card-body">
                        <!--查询-->
                        <form id="searchForm" class="layui-form" action="" style="max-width:600px;display: inline;">
                            <div class="layui-inline ">
                                <label class="layui-form-label">正则类型</label>
                                <div class="layui-input-block">
                                    <select name="funcType" lay-filter="funcType" style="height: 30px;">
                                        <option value="-1" selected >所有</option>
                                        <option value="normal" >内置正则</option>
                                        <option value="report" >自定义正则</option>
                                    </select>
                                </div>
                            </div>
                        </form>
                        <button class="layui-btn layui-btn-sm" lay-event="toSearch" onclick="toSearch()"><i
                                class="layui-icon layui-icon-search"></i>查询
                        </button>
                        <!--table-->
                        <table class="layui-hide" id="test" lay-filter="test"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>

<!--js-->
<script type="text/html" id="toolbarDemo">

    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="toAdd"><i class="layui-icon">&#xe654;</i>添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="toEdit"><i class="layui-icon">&#xe642;</i>修改</button>
        <button class="layui-btn layui-btn-sm" lay-event="toDelete"><i class="layui-icon">&#xe640;</i>删除</button>

    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="show">启用</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="show">禁用</a>
</script>

<script type="text/html" id="status">
    <span class="layui-badge-dot"></span>
</script>


<script>
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#test',
            toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , title: '正则数据表'
            , page: true
            , cols: [[
              /*  { title: '操作', toolbar: '#barDemo', fixed: 'left', width: 150 },*/
                { type: 'checkbox' }
                , { field: 'num', title: '序号', width: 65, align: 'center' }
                , { field: 'regexName', title: '正则名称', width: '10%', sort: false }
                , { field: 'type', title: '正则类型', width: '10%', sort: false }
                , { field: 'regexKey', title: '唯一key', width: '10%', sort: true }
                , { field: 'expression', title: '正则表达式', width: '30%', }
                , { field: 'state', title: '状态', width: '100px',}
                , { field: 'desc', title: '描述说明', width: '30%',}
                , { field: 'createTime', title: '创建时间', width: '40px', }
                , { field: 'updateTime', title: '修改时间', width: '40px', }
                , { title: '操作', toolbar: '#barDemo', fixed: 'right', width: 120 }

            ]]
            , data: [
                { num: "1", regexName: "手机号",
                    type: "内置正则",
                    regexKey: "phone",
                    expression: "\\d{3}-\\d{8}|\\d{4}-\\{7,8}",
                    state:"<span style='color: green'>正常</span>",
                    desc: "手机号正则表达式的使用",
                    createTime:"2020-01-01",
                    updateTime:"2020-01-02"
                },
                { num: "2", regexName: "邮箱",
                    type: "内置正则",
                    regexKey: "email",
                    expression: "[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?",
                    state:"<span style='color: green'>正常</span>",
                    desc: "邮箱正则表达式的使用",
                    createTime:"2020-01-01",
                    updateTime:"2020-01-02"
                },
                { num: "3", regexName: "身份证",
                    type: "内置正则",
                    regexKey: "idCard",
                    expression: "^(\\d{6})(\\d{4})(\\d{2})(\\d{2})(\\d{3})([0-9]|X)$",
                    state:"<span style='color: green'>正常</span>",
                    desc: "身份证正则表达式的使用",
                    createTime:"2020-01-01",
                    updateTime:"2020-01-02"
                },
                { num: "4", regexName: "邮编",
                    type: "内置正则",
                    regexKey: "postcode",
                    expression: "[1-9]\\d{5}(?!\\d)",
                    state:"<span style='color: green'>正常</span>",
                    desc: "邮编正则表达式的使用",
                    createTime:"2020-01-01",
                    updateTime:"2020-01-02"
                },
                { num: "5", regexName: "匹配QQ号",
                    type: "自定义正则",
                    regexKey: "qq",
                    expression: "[1-9][0-9]{4,}",
                    state:"<span style='color: #CCC'>已禁用</span>",
                    desc: "QQ号正则表达式的使用",
                    createTime:"2020-01-01",
                    updateTime:"2020-01-02"
                },
                { num: "6", regexName: "匹配年月日",
                    type: "自定义正则",
                    regexKey: "postcode",
                    expression: "([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8])))",
                    state:"<span style='color: green'>正常</span>",
                    desc: "年月日正则表达式的使用 \n" +
                        "格式为：yyyy-MM-dd",
                    createTime:"2020-01-01",
                    updateTime:"2020-01-02"
                },


            ]
            //,page: true
        });
        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'toAdd':
                    var data = checkStatus.data;
                    //layer.alert(JSON.stringify(data));
                    layer.open({
                        title: '添加',
                        shade: 0,
                        type: 2
                        ,id: 'layerDemo'+obj.config.id //防止重复弹出
                        , area: ['700px', '500px']
                        ,content: 'regex_edit.html'
                        ,btn: ['保存', '取消']
                        ,btnAlign: 'c' //按钮居中
                        ,shade: 0 //不显示遮罩
                        ,btn2: function(){
                            layer.closeAll();
                        }
                    });

                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });
        //监听行工具事件
        table.on('tool(test)', function (obj) {
            // var index = layer.load(1, {
            //   shade: [0.5, '#000'] //0.1透明度的背景
            // });
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'refresh') {
                console.log("强制通过")
            } else if (obj.event === 'show') {
                //layer.close(index);
                console.log(data)
                alert("打开excel预览")
                hot.loadData(dataObject1);
                console.log("show配置文件信息")
            }
        });
    });
</script>

</body>
</html>
